<template>
	<div id="case">
		<v-header :title="'精彩案例'"></v-header>
		<div class="scroll">
			<div class="case">
				<div class="case-item" @click="routerPush('/case/caseDetail')" v-for="item in list">
					<div>
						<img src="../../common/images/logo.png"/>
					</div>
					<div class="case-item-content">
						<div>风景摄影</div>
						<div>2018.06.14|江苏南京</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import VHeader from 'components/v-header'
	import VMask from 'components/v-mask'
	import Loading from 'components/loading'
	import BottomBar from 'components/bottom-bar'
	
	export default {
		components: {
			BottomBar,
			Loading,
			VMask,
			VHeader
		},
		data() {
			return {
				list:[1,1,1,1,1,1,1,1,1,1,1,1,1]
			}
		}
	}
</script>

<style scoped lang="stylus">
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

#case
	display flex
	flex-direction column
	position fixed
	height 100%
	width 100%
	background #fff
	
	.scroll
		flex 1
		overflow scroll
		.case
			padding 20px
			display flex
			flex-wrap wrap
			.case-item
				display flex
				width 48%
				flex-direction column
				margin 0 10px 10px 0
				border 2px solid $color-bg-gray
				img
					width 100%
					
				&:nth-child(even)
					margin-right: 0;
					
				.case-item-content
					display flex
					padding 10px
					font-size $font-size-small-s
					flex-direction column
					justify-content center
					align-items center
</style>